import { Button, Descriptions, Modal } from 'antd';
import React from 'react';

import { ICat } from '@/models/Cat';

interface IProps {
  cat: ICat;
  open: boolean;
  setOpen: (open: boolean) => void;
}

const CatInfoDialog = (props: IProps) => {
  const { cat, open, setOpen } = props;

  const items = [
    {
      key: 'name',
      label: '姓名',
      children: cat.name,
    },
    {
      key: 'description',
      label: '描述',
      children: cat.description,
    },
    {
      key: 'type',
      label: '类别',
      children: cat.type,
    },
  ];

  const onOk = () => {
    setOpen(false);
  };

  const onCancel = () => {
    setOpen(false);
  };

  return (
    <Modal
      title="猫咪详情"
      open={open}
      onOk={onOk}
      onCancel={onCancel}
      width={700}
      footer={[
        <Button key="submit" type="primary" onClick={onOk}>
          确定
        </Button>,
      ]}
    >
      <Descriptions size="small" bordered items={items} />
    </Modal>
  );
};

export default CatInfoDialog;
